昨天我們用 Cursor 加上 GitHub Actions，幫專案建立了 CI/CD 流程，確保每次程式碼 push 之後都會自動檢查、測試、build。

但還有一件很重要的事：程式碼風格要統一。

想像一下團隊專案裡出現這種狀況：

• 有人用 "，有人用 '
• 有人一行結尾加分號 ;，有人沒有
• 有人縮排 2 格，有人縮排 4 格
• PR 一合併，整個檔案被改到滿滿都是 diff，看不清楚誰改了什麼

這些小細節雖然不影響功能，但會嚴重影響閱讀性與協作效率。

因此今天，我們要透過 ESLint + Prettier + TypeScript，再加上 Cursor 的幫助，讓專案風格自動一致。

🛠️ 建立規範工具組

在 Node.js 專案中常用的規範工具組合是：

• ESLint → 負責程式碼規則檢查（例如變數未使用、函數過長等）
• Prettier → 負責程式碼自動格式化（例如縮排、引號、分號風格）
• TypeScript → 提供型別安全，避免因型別錯誤造成 bug

1. 安裝必要套件

在專案根目錄執行：

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 建立 ESLint 設定檔

在 Cursor 裡直接輸入：

幫我建立一份適合 Next.js + TypeScript 的 ESLint 設定
要整合 Prettier

Cursor 會幫你生成 .eslintrc.js，例如：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    // 可以依需求調整
    '@typescript-eslint/no-unused-vars': 'warn',
    'prettier/prettier': ['error'],
  },
};

3. 建立 Prettier 設定檔

新增 .prettierrc：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

這樣就能保證大家的縮排、引號、分號規則一致。

4. 整合到 Cursor 開發流程

這裡就是 Cursor 的強大之處：

當你在 Cursor 裡編輯檔案時，它會依照設定檔即時提醒、甚至自動修正格式。

你可以這樣跟它說：

幫我把這支檔案修正成符合 ESLint + Prettier 規範

Cursor 就會自動整理好整份程式碼，無需手動調整。

🔁 自動化檢查：加到 CI/CD

昨天我們建立了 CI 流程，今天只要加一個步驟：

- name: Run ESLint
  run: npm run lint

並在 package.json 裡加上：

"scripts": {
  "lint": "eslint . --ext .js,.ts,.tsx"
}

這樣，每次 push 或 PR 時，CI 就會自動檢查程式碼是否符合規範。

若有不符合規範的地方，CI 會直接失敗 🚫。

✨ 更進一步：Pre-commit 檢查

為了避免「錯誤的程式碼」進到 Git repo，可以再加上 Husky + lint-staged：

npm install -D husky lint-staged
npx husky install

在 package.json 裡加入：

"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"]
}

再建立 pre-commit hook：

npx husky add .husky/pre-commit "npx lint-staged"

這樣每次 commit 前，程式碼會自動被修正、檢查，永遠不會有「亂掉的程式碼」進 repo。

📌 Day 19 總結

今天我們讓專案邁向了「程式碼風格一致」：

• 建立了 ESLint + Prettier + TypeScript 規範
• 用 Cursor 自動生成與修正程式碼
• 在 CI/CD 中加入規範檢查
• 加上 pre-commit hook，徹底封鎖「亂碼」

從今天開始，團隊成員不需要再爭論「到底要不要加分號」或「到底要幾格縮排」了。

Cursor + CI/CD 會幫你自動決定，讓大家專心寫功能。